<script setup lang="ts">
import { Order, type TinyUser } from '$/client'
import { orderTypeSelections } from '$/vexip/presets'
import type { OrderIn } from '@/scripts/client-admin'
import type { CommonFormProps } from '@/types'
import { Form, FormItem, FormSubmit, Input, NumberInput, Select } from 'vexip-ui'

defineProps<CommonFormProps & { copilots: TinyUser[]; users: TinyUser[] }>()

const model = defineModel<OrderIn | Order>({ required: true })
</script>

<template>
  <Form :model="model" :loading="loading">
    <FormItem label="老板" prop="user" required>
      <Select :options="users.map((x) => ({ label: x.name, value: x.id }))" filter />
    </FormItem>
    <FormItem label="陪玩" prop="copilot" required>
      <Select :options="copilots.map((x) => ({ label: x.name, value: x.id }))" filter />
    </FormItem>
    <FormItem label="订单详情" prop="description">
      <Input :max-length="50" />
    </FormItem>
    <FormItem label="订单类型" prop="type" required>
      <Select :options="orderTypeSelections" />
    </FormItem>
    <FormItem label="单价" prop="price" required>
      <NumberInput :precision="2" />
    </FormItem>
    <FormItem label="时长" prop="duration" required>
      <NumberInput :precision="2" />
    </FormItem>
    <FormItem action>
      <FormSubmit @submit="submit" block />
    </FormItem>
  </Form>
</template>
